<template>
  <div @click="setTags" class="user_tags" :class="{loading: loading, active: isSelect()}"
  :style="isSelect() ? 'background:'+ csuser.tags_list.list[tagid].color +';border-color:'+ csuser.tags_list.list[tagid].color +';' : 'color:'+ csuser.tags_list.list[tagid].color +';border-color:'+ csuser.tags_list.list[tagid].color +';'">
    <Icons name="loading-copy" />
    {{csuser.tags_list.list[tagid].name}}
  </div>
</template>

<script>
export default {
  name: 'userTags',
  data: () => {
    return {
      loading: false
    }
  },
  props: {
    tagid: {
      default: null
    },
    user: {
      default: null
    },
    csuser: {
      default: null
    }
  },
  created () {
  },
  methods: {
    isSelect () {
      for (var i in this.user.tagid_list) {
        if (parseInt(this.user.tagid_list[i]) === parseInt(this.tagid)) {
          return true
        }
      }
      return false
    },
    async setTags () {
      if (this.loading) return
      this.loading = true
      var data = {
        appid: this.csuser.appid,
        openid: this.user.openid,
        tagid: this.tagid
      }
      var result
      try {
        if (this.isSelect()) { // 删除标签
          result = await this.$fn.delUserTags(data)
        } else { // 添加标签
          result = await this.$fn.setUserTags(data)
        }
        this.loading = false
        console.log(result.data)
        if (result.data.status === 1) {
          this.user.tagid_list = result.data.tagid_list
        } else {
          this.$Message.error('修改标签出错，请重试！')
        }
      } catch (e) {
        console.log(e)
        this.loading = false
        this.$Message.error('修改标签出错，请重试！')
      }
      this.$emit('updataTagStatus')
    }
  }
}
</script>

<style lang="less" scoped>
@import './style.less';
</style>
